<!--  -->
<template>
  <div class="scenes flex-column rela h-100P">
    <CustomButton title="新建电源" @click="handleCreate"></CustomButton>
    <div class=" flex-sub  w-100P" style="overflow-y: auto;">
      <div class="card-container flex-warp">
        <SceneCard
          class="scene-card"
          v-for="data in sceneCards"
          :key="data.id"
          :value="data"
          @edit="handleEdit"
          @delete="handleDelete"
        />
      </div>
    </div>
    <el-pagination
      background
      layout="prev, pager, next, total, jumper"
      :total="pageHelper.total"
      :page-size="pageHelper.pageSize"
      hide-on-single-page
      @current-change="handleCurrentChange"
    />
    <UpdateOrCreated
      :visible.sync="showDialog"
      :type="dialogType"
      :sceneData="createdOrUpdateData"
      @change="findScenePageByParam"
    />
  </div>
</template>

<script>
import SceneCard from './components/scene-card'
import { apiFindScenePageByParam, apiDelSceneById } from './api'
import UpdateOrCreated from './components/update-or-created'
import CustomButton from '@/components/custom-button'

export default {
  name: 'Scene',
  components: { SceneCard, UpdateOrCreated, CustomButton },
  data() {
    return {
      sceneCards: [],
      pageHelper: { pageNo: 1, pageSize: 12, total: 0 },
      createdOrUpdateData: {},
      showDialog: false,
      dialogType: 'update',
    }
  },
  computed: {},

  created() {
    this.initPage()
  },

  methods: {
    // 切换页面
    async handleCurrentChange(val) {
      this.pageHelper.pageNo = val
      const { records } = await apiFindScenePageByParam(this.pageHelper)
      this.sceneCards = records
    },
    initPage() {
      this.findScenePageByParam()
    },
    async findScenePageByParam() {
      const { records, pageNo, pageSize, total } = await apiFindScenePageByParam(this.pageHelper)
      this.sceneCards = records
      this.pageHelper = { pageNo, pageSize, total }
    },
    handleEdit(data) {
      this.createdOrUpdateData = { ...data }
      this.showDialog = true
    },
    async handleDelete(data) {
      const { pageNo, pageSize, total } = this.pageHelper
      if ((pageNo - 1) * pageSize >= total - 1 && pageNo > 0) {
        this.pageHelper.pageNo--
      }
      try {
        await apiDelSceneById(data.id)
        this.$message.success('删除成功')
        await this.findScenePageByParam()
      } catch (e) {
        this.$message.error(e)
      }
    },
    handleCreate() {
      this.showDialog = true
      this.createdOrUpdateData = {
        dataStatusEnum: this.$consts.DataStatusEnum.NORMAL,
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.scenes {
  height: 100%;
  padding: 20px;

  .scene-card {
    width: calc(25% - #{vw(40px)});
    margin-top: vh(40px);
    margin-right: vw(40px);
  }

  ::v-deep .el-row--flex {
    flex-wrap: wrap;
  }

  .card-container {
    padding-bottom: vw(20px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  ::v-deep .el-button--danger.is-plain {
    color: #d12d1f;
    background: none;
    border-color: #d12d1f;
  }

  //::v-deep .el-button--danger.is-plain:focus,
  //.el-button--danger.is-plain:hover {
  //  background-color: #d12d1f;
  //  color: white;
  //}
}
</style>
